<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Stock</title>
    <link rel="shortcut icon" type="image/x-icon" href="__STATIC__/img/stock-1.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url("__STATIC__/img/bg.png");
        }
        /*标题*/
        .title {
            position: relative;
            font-family: 宋体;
            border-left: #E3E3E3 solid 4px;
            margin: 20px;
            width: 95%;
            height: 35px;
        }

        .row {
            width: 100%;
            margin: 10px auto;
            position: relative;
        }

        #container {
            width: 95%;
            height: 300px;
            margin: 20px auto;
            display: none;
        }
        /*翻页*/
        .page {
            text-align: center;
        }
        /*版权*/
        .sig {
            position: relative;
            bottom: 0;
            text-align: center;
            color: darkgray;
        }
    </style>
</head>
<body>
<!--头部-->
<header>
    <h2 class="title">&nbsp;股市总览</h2>
</header>
<!--内容-->
<section>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="__STATIC__/img/ex-1.jpg" alt="...">
                <div class="caption">
                    <p class="lead">紫光股份</p>
                    <p id="price_unis">当前价格：</p>
                    <p id="number_unis">成交股票数：</p>
                    <p id="amount_unis">成交金额：</p>
                    <button id="btn" class="btn btn-primary">价格走势</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="__STATIC__/img/ex-2.jpg" alt="...">
                <div class="caption">
                    <p class="lead">朗科科技</p>
                    <p id="price_netac">当前价格：</p>
                    <p id="number_netac">成交股票数：</p>
                    <p id="amount_netac">成交金额：</p>
                    <button class="btn btn-primary">价格走势</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="__STATIC__/img/ex-4.jpg" alt="...">
                <div class="caption">
                    <p class="lead">网宿科技</p>
                    <p id="price_wangsu">当前价格：</p>
                    <p id="number_wangsu">成交股票数：</p>
                    <p id="amount_wangsu">成交金额：</p>
                    <button class="btn btn-primary">价格走势</button>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src="__STATIC__/img/ex-3.jpg" alt="...">
                <div class="caption">
                    <p class="lead">机器人</p>
                    <p id="price_robot">当前价格：</p>
                    <p id="number_robot">成交股票数：</p>
                    <p id="amount_robot">成交金额：</p>
                    <button class="btn btn-primary">价格走势</button>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div id="container"></div>
</section>

<!--尾部-->
<footer>
    <nav class="page" aria-label="...">
        <ul class="pagination">
            <li class="disabled">
              <span>
                <span aria-hidden="true">&laquo;</span>
              </span>
            </li>
            <li class="active">
                <span>1 <span class="sr-only">(current)</span></span>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <span>
                    <span aria-hidden="true">&raquo;</span>
                </span>
            </li>
        </ul>
    </nav>
    <p class="sig"><span>Copyright &copy; 2018 By Akashi_Sai</span></p>
</footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://hq.sinajs.cn/list=sz000938" charset="gb2312"></script>
<script type="text/javascript" src="http://hq.sinajs.cn/list=sz300042" charset="gb2312"></script>
<script type="text/javascript" src="http://hq.sinajs.cn/list=sz300017" charset="gb2312"></script>
<script type="text/javascript" src="http://hq.sinajs.cn/list=sz300024" charset="gb2312"></script>
<!--http://api.mayitours.com/test?user=xnmd&&token=d656034355a4dbc3bed50bf4a23ce2f6&&stock_name=sz000938-->
<script>
    var unis = hq_str_sz000938.split(",");
    // console.log(hq_str_sz000938);
    $(document).ready(function () {
        $("#price_unis").html("当前价格：<mark>￥" + unis[3] + "</mark>");
        $("#number_unis").html("成交股票数：" + unis[8]/100 + "&nbsp;&nbsp;百股");
        $("#amount_unis").html("成交金额：" + Math.round(unis[9]/10000) + "&nbsp;&nbsp;万元");
    });

    var netac = hq_str_sz300042.split(",");
    $(document).ready(function () {
        $("#price_netac").html("当前价格：<mark>￥" + netac[3] + "</mark>");
        $("#number_netac").html("成交股票数：" + netac[8]/100 + "&nbsp;&nbsp;百股");
        $("#amount_netac").html("成交金额：" + Math.round(netac[9]/10000) + "&nbsp;&nbsp;万元");
    });

    var wangsu = hq_str_sz300017.split(",");
    $(document).ready(function () {
        $("#price_wangsu").html("当前价格：<mark>￥" + wangsu[3] + "</mark>");
        $("#number_wangsu").html("成交股票数：" + wangsu[8]/100 + "&nbsp;&nbsp;百股");
        $("#amount_wangsu").html("成交金额：" + Math.round(wangsu[9]/10000) + "&nbsp;&nbsp;万元");
    });

    var robot = hq_str_sz300024.split(",");
    $(document).ready(function () {
        $("#price_robot").html("当前价格：<mark>￥" + robot[3] + "</mark>");
        $("#number_robot").html("成交股票数：" + robot[8]/100 + "&nbsp;&nbsp;百股");
        $("#amount_robot").html("成交金额：" + Math.round(robot[9]/10000) + "&nbsp;&nbsp;万元");
    });

    // $(document).ready(function () {
    //     $('.btn').click(function () {
    //         var display = $('#container').css('display');
    //         if( !display || display === 'none') {
    //             $('#container').css('display','block');
    //         } else {
    //             $('#container').css('display','none');
    //         }
    //
    //     })
    // })

    $(document).ready(function () {
        $('.btn').click(function () {
            $('#container').fadeToggle();
        })
    });
</script>
<script>

</script>
<script>
    //动态更新折线图
    // var ydata;
    // setInterval(function () {
    //     $.ajax({
    //         type: 'get',
    //         async: false,
    //         cache: false,
    //         url:'http://api.mayitours.com/test?user=xnmd&&token=d656034355a4dbc3bed50bf4a23ce2f6&&stock_name=sz000938',
    //         dataType:'json',
    //
    //         success:function (da) {
    //             ydata = da['current_price'];
    //             // console.log(da['current_price']);
    //         }
    //     });
    // }, 2000);
    // setTimeout(function () {
    //
    // },1000);
       $(function () {
        $(document).ready(function() {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            var chart;
            $('#container').highcharts({
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    events: {
                        load: function () {
                            var series = this.series[0];
                            setInterval(function () {
                                var x = (new Date()).getTime(), // 当期时间
                                    //转换为数值类型
                                    y;
                                    // y = parseFloat(ydata);
                                    // console.log(y);
                                $.ajax({
                                    type: 'get',
                                    async: false,
                                    cache: false,
                                    dataType: 'json',
                                    // url:'http://api.mayitours.com/test?user=xnmd&&token=d656034355a4dbc3bed50bf4a23ce2f6&&stock_name=sz000938',
                                    url:'{:url("index/getdata")}',
                                    success:function (res) {
                                        // y = parseFloat(data['current_price']);
                                        y = parseFloat(res.data[3]);
                                        console.log(res);
                                    }
                                });
                                series.addPoint([x, y], true, true);

                            }, 2000);
                        }
                    }
                },
                credits: {
                    enabled:false
                },

                title: {
                    text: '当前价格走势'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    title: {
                        text: '价格'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                            Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },

                series: [{
                    name: '当前价格',
                    data: (function() {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;

                        for (i = -19; i <= 0; i++) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    })()
                }]
            });
        });

    });


</script>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="__STATIC__/js/plugins/highcharts/highcharts.js"></script>
<script src="__STATIC__/js/plugins/highcharts/modules/exporting.js"></script>
</body>
</html>